<template>
  <el-dialog
    v-model="visible"
    :width="1100"
    :close-on-click-modal="false"
    append-to-body
    title="报价历史"
  >
    <div class="search-bar">
      <el-form
        :inline="true"
        :model="hisSearchForm"
      >
        <div class="input-row">
          <el-form-item label="报价时间：">
            <el-date-picker
              v-model="dateRange"
              type="datetimerange"
              clearable
              :range-separator="$t('date.tip')"
              value-format="YYYY-MM-DD HH:mm:ss"
              :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)]"
              :start-placeholder="$t('date.start')"
              :end-placeholder="$t('date.end')"
            />
          </el-form-item>

          <el-form-item label="是否转订单：">
            <el-select
              v-model="hisSearchForm.hasOrder"
              clearable
            >
              <el-option
                label="是"
                :value="true"
              />
              <el-option
                label="否"
                :value="false"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <div
              class="default-btn primary-btn"
              @click="onSearch(true)"
            >
              {{ $t("order.query") }}
            </div>
            <div
              class="default-btn"
              @click="onResetSearch()"
            >
              {{ $t("product.reset") }}
            </div>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div
      class="table-con prod-table"
    >
      <el-table
        :data="hisList"
        style="width: 100%"
      >
        <el-table-column
          prop="orderNo"
          label="询价单号"
          min-width="150"
        >
          <template #default="scope">
            <el-button
              type="text"
              @click="goToDetail(scope.row)"
            >
              {{ scope.row.orderNo }}
            </el-button>
          </template>
        </el-table-column>

        <el-table-column
          prop="quotationTime"
          label="报价时间"
          :width="180"
        />

        <el-table-column
          prop="number"
          label="报价个数"
          min-width="100"
        />

        <el-table-column
          prop="price"
          label="报价（¥/个）"
          min-width="100"
        />

        <el-table-column
          prop="hasOrder"
          label="是否转订单"
          min-width="100"
        >
          <template #default="scope">
            {{ scope.row.hasOrder ? '是' : '否' }}
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        v-if="hisList.length"
        style="margin-top: 10px; justify-content: flex-end;"
        :current-page="detailPage.currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="detailPage.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="detailPage.total"
        @size-change="onPageSizeChangeD"
        @current-change="onPageChangeD"
      />
    </div>
  </el-dialog>
</template>

<script setup>
const emit = defineEmits(['goToDetail'])

const detailPage = reactive({
  total: 0, // 总页数
  currentPage: 1, // 当前页数
  pageSize: 10 // 每页显示多少条
})

const goToDetail = (row) => {
  visible.value = false
  emit('goToDetail', row)
}

const dateRange = ref([])
const hisSearchForm = ref({})
const visible = ref(false)
const hisList = ref([])
const init = (row) => {
  const { prodId, skuCode, skuId } = row
  visible.value = true
  dateRange.value = []
  hisSearchForm.value = {
    prodId,
    skuCode,
    skuId
  }
  hisList.value = []
  getHisList()
}

const onSearch = () => {
  detailPage.currentPage = 1
  getHisList()
}

const onResetSearch = () => {
  hisSearchForm.value.hasOrder = ''
  dateRange.value = []
}

const onPageSizeChangeD = (val) => {
  detailPage.pageSize = val
  getHisList(detailPage)
}

const onPageChangeD = (val) => {
  detailPage.currentPage = val
  getHisList(detailPage)
}

const getHisList = (pageParam) => {
  const param = {
    current: pageParam == null ? detailPage.currentPage : pageParam.currentPage,
    size: pageParam == null ? detailPage.pageSize : pageParam.pageSize,
    ...hisSearchForm.value
  }
  if (dateRange.value && dateRange.value[0]) {
    param.beginTime = dateRange.value[0]
    param.endTime = dateRange.value[1]
  }
  http({
    url: http.adornUrl('/platform/quotation-history/page'),
    method: 'get',
    params: http.adornParams(param)
  }).then(({ data }) => {
    hisList.value = data.records
    detailPage.total = data.total
    // 末尾页数据为空重新请求
    if (!hisList.value.length && detailPage.currentPage > 1) {
      detailPage.currentPage = 1
      getHisList()
    }
  })
}

defineExpose({
  init
})

</script>

<style lang="scss" scoped>
.inv-item{
  .copy{
    display: none;
    margin-left: 10px;
  }

  &:hover{
    .copy{
      display: inline-block;
    }
  }
}

.upload-video-box {
  width: 100%;

  .video-preview {
    width: 128px;
    height: 128px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
    box-sizing: border-box;
    margin-right: 8px;
    margin-bottom: 5px;
    position: relative;
    overflow: hidden;

    &:hover{
      .el-icon-delete {
        display: block;
      }
    }

    .el-icon-delete{
      display: none;
      background: rgba(0, 0, 0, .3);
      height: 30px;
      width: 100%;
      text-align: center;
      padding: 5px;
      position: absolute;
      bottom: 0;
      left: 0;
      font-size: 20px;
    }

    .progress{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 128px;
      padding: 24px;
      background: rgba(0, 0, 0, .5);

      :deep(.el-progress__text){
        color: #fff;
      }
    }
  }
}
</style>
